<template>
  <div>
    <!-- 头部 -->
    <van-sticky style="margin-bottom:.4375rem;">
      <header class="header">
        <router-link to="/" style="display: flex; margin-left: 0.9375rem"
          ><van-icon name="/img/left1.png" size="25"
        /></router-link>
        <span>四六级</span>
        <div style="display: flex"></div>
      </header>
      <!-- 顶部选项卡 -->
      <van-tabs
        color="#4c84ff"
        title-inactive-color="#c3c7cb"
        title-active-color="#222831"
      >
        <van-tab title="全部" ></van-tab>
        <van-tab title="系统课"></van-tab>
        <van-tab title="公开课"></van-tab>
      </van-tabs>
    </van-sticky>
     <!-- 卡片 -->
    <!-- 单一文章信息开始 -->
    <div class="articleItem" v-for="(item, i) in articles" :key="i">
    <!-- 跳转到卡片  -->
    <!-- 需要修改 -->
      <router-link :to="`/network`" >
        <!-- 文章图文信息开始 -->
        <div class="articleItem-wrapper">
          <!-- 文章图像开始  -->
          <div class="articleImg">
            <img v-if="item.pic" :src="`${item.pic}`" />
            <div class="articleItem-level">{{ item.pic_title }}</div>
          </div>
          <div class="articleItem-post">
            <!-- 文章标题开始 -->
            <div class="articleItem-header">{{ item.title }}</div>
            <div class="articleItem-time">
              开课:{{ item.time }} | {{ item.hour }}
            </div>
            <!-- 标签 -->
            <div class="articleItem-teas">
              <span class="articleItem-tea">{{ item.teacher }}</span>
            </div>
          </div>
        </div>
      </router-link>
      <div class="articleItem-price">
        <span class="articleItem-price-hint">限购{{ item.limitNumber }}人</span>
        <span class="articleItem-price-number"
          >已有{{ item.orderNumber }}人购买</span
        >
        <span class="articleItem-price-o">¥199</span>
        <span class="articleItem-price-n">¥{{ item.price }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      articles: []
    };
  },
  methods: {
    loadArticles(callback) {
      // this.$indicator.open({
      //   text: "加载中...",
      //   spinnerType: "snake"
      // });
      // 发送http请求，获取的第一页文章列表
      this.axios.get(`/course/siliu`).then(res => {
        console.log(res);
        callback(res.data.data);
        // this.$indicator.close();
      });
    }
  },
  /** 页面元素挂载完毕后执行该生命周期方法 */
  mounted() {
    // 发送http请求，获取的第一页文章列表
    this.loadArticles(arts => {
      // 将服务端返回的结果设置为当前列表
      this.articles = arts;
    });
  }
};
</script>
<style scoped>
/* 头部 */
.header div {
  height: 2.5rem;
  width: 2.5rem;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}

.header span {
  font-size: 1.25rem;
}

/* 卡片 */
.articleItem {
  display: flex;
  width: 345px;
  height: 132px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2);
  flex-direction: column;
}
.articleItem-wrapper {
  display: flex;
}
.articleImg {
  width: 141px;
  height: 95px;
  position: relative;
}
.articleImg img {
  width: 126px;
  height: 95px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.articleItem-level {
  position: absolute;
  top: 0;
  right: 0;
  background-image: linear-gradient(90deg, #bdc9e2, #98a6c4);
  color: #fff;
  font-size: 14px;
  padding: 2.5px 6px;
  border-radius: 0 0 0 3px;
}
.articleItem-post {
  display: flex;
  flex-direction: column;
  width: 184px;
  height: 95px;
  margin-left: 10px;
  margin-right: 10px;
}
.articleItem-header {
  font-size: 14px;
  color: #222831;
  margin-top: 7px;
  width: 184px;
  height: 37px;
  font-weight: 700;
  word-wrap: break-word;
  word-break: break-all;
  text-align: left;
}
.articleItem-time {
  margin-top: 7px;
  font-size: 12px;
  line-height: 12px;
  color: #c3c7cb;
}

.articleItem-teas {
  display: flex;
  margin-top: 8px;
  height: 16px;
  flex-direction: row;
}
.articleItem-tea {
  font-size: 14px;
  color: #fff;
  line-height: 16px;
  padding: 0 6px;
  margin-right: 5px;
  background-color: #4c84ff;
  opacity: 0.4;
  border-radius: 8px 8px 0 8px;
}
.articleItem-price {
  height: 37px;
  display: flex;
  align-items: center;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  background-color: #f6f7f8;
}
.articleItem-price-hint {
  font-size: 12px;
  line-height: 18px;
  margin-left: 15px;
  color: #8d95a1;
}
.articleItem-price-number {
  font-size: 12px;
  width: 153.64px;
  line-height: 18px;
  margin-left: 15px;
  color: #8d95a1;
}
.articleItem-price-o {
  font-size: 12px;
  line-height: 18px;
  margin-right: 10px;
  text-decoration: line-through;
  color: #c3c7cb;
}
.articleItem-price-n {
  font-size: 15px;
  line-height: 22px;
  margin-right: 15px;
  color: #222831;
  font-weight: 700;
}
</style>